<table class="printer-status" *ngIf="printerStatus">
  <tr>
    <td
      class="printer-status__value printer-status__value-1"
      [ngClass]="{ 'printer-status__no-set-value': printerStatus.nozzle.set === 0 }"
      (click)="showQuickControlHotend()"
      matRipple
      [matRippleUnbounded]="false"
    >
      <img src="assets/nozzle.svg" />
      <span class="printer-status__actual-value"
        >{{ printerStatus.nozzle.current }}<span class="printer-status__unit">°C</span></span
      >
      <span class="printer-status__set-value" *ngIf="printerStatus.nozzle.set"
        >/{{ printerStatus.nozzle.set }}<span class="unit">°C</span></span
      >
    </td>
    <td
      class="printer-status__value printer-status__value-2"
      [ngClass]="{ 'printer-status__no-set-value': printerStatus.heatbed.set === 0 }"
      (click)="showQuickControlHeatbed()"
      matRipple
      [matRippleUnbounded]="false"
    >
      <img src="assets/heat-bed.svg" />
      <span class="printer-status__actual-value"
        >{{ printerStatus.heatbed.current }}<span class="printer-status__unit">°C</span></span
      >
      <span class="printer-status__set-value" *ngIf="printerStatus.heatbed.set"
        >/{{ printerStatus.heatbed.set }}<span class="unit">°C</span></span
      >
    </td>
    <td
      class="printer-status__value printer-status__value-3 printer-status__no-set-value"
      (click)="showQuickControlFan()"
      matRipple
      [matRippleUnbounded]="false"
    >
      <img src="assets/fan.svg" />
      <span class="printer-status__actual-value"
        >{{ printerStatus.fan }}<span class="printer-status__unit">%</span></span
      >
    </td>
  </tr>
</table>
<div class="quick-control" *ngIf="view !== QuickControlView.NONE" id="quickControl">
  <table class="top-bar" (click)="hideQuickControl()">
    <tr>
      <td class="top-bar__back">
        <img src="assets/back.svg" class="top-bar__back-icon" matRipple [matRippleUnbounded]="false" />back
      </td>
      <td class="top-bar__center">
        <img
          [src]="
            'assets/' +
            (view === QuickControlView.HOTEND
              ? 'nozzle.svg'
              : view === QuickControlView.HEATBED
              ? 'heat-bed.svg'
              : 'fan.svg')
          "
          class="top-bar__center-icon"
        />
      </td>
      <td class="top-bar__back"></td>
    </tr>
  </table>
  <div class="quick-control__controller">
    <div class="quick-control__controller-row">
      <div
        class="quick-control__controller-increase"
        (click)="quickControlChangeValue(1)"
        matRipple
        [matRippleUnbounded]="false"
      >
        +1
      </div>
      <div
        class="quick-control__controller-increase"
        (click)="quickControlChangeValue(10)"
        matRipple
        [matRippleUnbounded]="false"
      >
        +10
      </div>
    </div>
    <div
      class="quick-control__controller-value"
      colspan="2"
      *ngIf="view === QuickControlView.HOTEND"
      (click)="quickControlChangeValue(-1000)"
      matRipple
      [matRippleUnbounded]="false"
    >
      {{ this.hotendTarget }}
      <span class="quick-control__controller-value-unit">°C</span>
    </div>
    <div
      class="quick-control__controller-value"
      colspan="2"
      *ngIf="view === QuickControlView.HEATBED"
      (click)="quickControlChangeValue(-1000)"
      matRipple
      [matRippleUnbounded]="false"
    >
      {{ this.heatbedTarget }}
      <span class="quick-control__controller-value-unit">°C</span>
    </div>
    <div
      class="quick-control__controller-value"
      colspan="2"
      *ngIf="view === QuickControlView.FAN"
      (click)="quickControlChangeValue(-1000)"
      matRipple
      [matRippleUnbounded]="false"
    >
      {{ this.fanTarget }}
      <span class="quick-control__controller-value-unit">%</span>
    </div>
    <div class="quick-control__controller-row">
      <div
        class="quick-control__controller-decrease"
        (click)="quickControlChangeValue(-1)"
        matRipple
        [matRippleUnbounded]="false"
      >
        -1
      </div>
      <div
        class="quick-control__controller-decrease"
        (click)="quickControlChangeValue(-10)"
        matRipple
        [matRippleUnbounded]="false"
      >
        -10
      </div>
    </div>
    <div class="quick-control__controller-row">
      <div
        class="quick-control__controller-set"
        colspan="2"
        (click)="quickControlSetValue()"
        matRipple
        [matRippleUnbounded]="false"
      >
        <span class="quick-control__controller-set-span">set</span>
      </div>
    </div>
  </div>
</div>
